<template>
  <el-row class="h100">
    <el-col class="h100" :span="6">
      <edit-tree
        ref="tree"
        :treeSetting="treeSetting"
        :hideBtn="hideBtn"
        @handleClickTree="handleClickTree"
        :filterNode="filterNode"
      />
    </el-col>
    <el-col class="h100" :span="18">
      <div class="table-list">
        <el-button class="sync-button" icon="el-icon-refresh" size="small" @click="toSyncStaffList">同步</el-button>
        <list-table-new v-bind="tableConfig" ref="listTable"></list-table-new>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {
  getCommonOrgTree,
  getCommonUser,
  getStaffListInSystem
} from "@/api/systemManagement/userManagement.js";
import listTableNew from "../../../../components/table/listTableNew.vue";
export default {
  components: { listTableNew },
  data() {
    return {
      orgCode: "",
      treeSetting: {
        title: "集团用户",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      //表格数据配置
      tableConfig: {
        showAllSearch: true,
        showIndex: true,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          searchArr: [
            {
              type: "input",
              label: "用户名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        column: [
          {
            label: "用户名",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "组织",
            textAlign: "center",
            prop: "orgName",
          }
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        pageSmall:true,
      },
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    async toSyncStaffList() {
      try {
        const { code } = await getStaffListInSystem()
        if(code === 200) {
          setTimeout(() => {
            this.$message.success('同步完成')
          }, 300);
        } else {
          this.$message.error('同步失败')
          throw new URIError('同步接口出错!')
        }
      } catch (error) {
        this.$message.error(error)
      }
    },
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //点击树
    handleClickTree(node) {
      this.orgCode = node.id;
      this.$refs.listTable.searchData();
    },
    getSelectData() {
      let arr = this.$refs.listTable.getSelectData();
      return arr;
    },
    //清空选择
    clearSelect(){
      this.$refs.listTable.clearSelection();
    },
    //获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      queryData.parentId = this.orgCode;
      getCommonUser(queryData).then((res) => {
        this.$set(this.tableConfig, "tableData", res.data);
        this.$set(this.tableConfig, "totalNumber", res.total);
      });
    },
    //获取组织树数据
    getTreeData() {
      //得到组织树的数据
      getCommonOrgTree().then((res) => {
        if (res.code == 200 && res.data.length > 0) {
          this.$set(this.treeSetting, "data", res.data);
          this.$refs.listTable.searchData();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.table-list {
  height: 100%;
  border-left: 15px solid #f2f3f8;
  padding: 20px;
  position: relative;

  .sync-button {
    position: absolute;
    left: 20px;
    top: 70px;
    z-index: 2;
  }
}
</style>